<nz-card>
  <nz-tabset nzType="card">
    <!--待验收-->
    <nz-tab [nzTitle]="'待验收('+waitCheck.tableData.total+')'">
      <!--过滤-->
      <div>
        <div class="searchItem">
          <label>编码：</label>
          <input nz-input placeholder="请输入编码" [(ngModel)]="waitCheck.query.equipmentCode"/>
        </div>
        <div class="searchItem">
          <label>成交入库时间：</label>
          <nz-date-picker style="width: 140px;"
                          nzFormat="yyyy-MM-dd"
                          [(ngModel)]="waitCheck.query.startTime"
                          nzPlaceHolder="开始时间"
          ></nz-date-picker>
          <nz-date-picker style="width: 140px;"
                          nzFormat="yyyy-MM-dd"
                          [(ngModel)]="waitCheck.query.endTime"
                          nzPlaceHolder="结束时间"
          ></nz-date-picker>
        </div>
        <div class="searchItem">
          <label>机型：</label>
          <input nz-input placeholder="请输入机型" [(ngModel)]="waitCheck.query.modelName"/>
        </div>
        <div class="searchItem">
          <label>来源：</label>
          <nz-select [(ngModel)]="waitCheck.query.source" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
            <nz-option [nzValue]="0" nzLabel="回收"></nz-option>
            <nz-option [nzValue]="1" nzLabel="重新入库"></nz-option>
          </nz-select>
        </div>
        <div class="searchItem">
          <button nz-button nzType="primary" (click)="queryBtn('waitCheck')">查询</button>
          <button nz-button nzType="default" (click)="resetCondition('waitCheck')">重置</button>
        </div>
      </div>
      <div class="m-t-20 m-b-10">
        <button nzType="primary" nzPopconfirmPlacement="top"
                nz-popconfirm
                nzPopconfirmTitle="确认验收已选中的机器?"
                nzOkText="确认"
                (nzOnConfirm)="checkDevice('all')"
                nzCancelText="取消" nz-button>验收已选中
        </button>

        <button
          *ngIf="permissionService.userPermission.has('used-store:usedDeviceList:location')"
          nz-button
          nzType="primary"
          class="m-l-10"
          (click)="showEditLocationModal(0)">
          修改库位
        </button>

        <button
          *ngIf="permissionService.userPermission.has('used-store:usedDeviceList:occupy')"
          nz-button
          nzType="primary"
          class="m-l-10"
          (click)="secendOccupy()">
          二手占用
        </button>

        <button
          *ngIf="permissionService.userPermission.has('used-store:usedStoreDeviceCheck:gkwzy')"
          nz-button
          nzType="primary"
          nzDanger
          class="m-l-10"
          (click)="showEditLocationModal(1)">
          修改库位并二手占用
        </button>
      </div>

      <!--表格-->
      <nz-table
        #waitCheckTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzData]="waitCheck.tableData.records"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="waitCheck.tableData.total"
        [(nzPageIndex)]="waitCheck.query.page"
        [(nzPageSize)]="waitCheck.query.pageSize"
        [nzFrontPagination]="false"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChangeWaitCheck($event)"
        (nzPageSizeChange)="onPageSizeChangeWaitCheck($event)"
      >
        <thead>
        <tr>
          <th nzWidth="100px" nzAlign="center">机型汇总</th>
          <th [colSpan]="11" nzAlign="left">
            <a class="typeTag" (click)="waitCheckTypeClick(type['modelName'])"
               *ngFor="let type of waitCheck.tableData.type">
              {{type['modelName']}}
              <span class="num">{{type['modelNameCount']}}</span>
            </a>
          </th>
        </tr>
        <tr>
          <th nzWidth="100px" nzAlign="center">时间分布</th>
          <th [colSpan]="11" nzAlign="left">
            <a class="typeTag" (click)="waitCheckTimeClick(date['dateCount'])"
               *ngFor="let date of waitCheck.tableData.date">{{date['dateCount']}}
              <span class="num">{{date['count']}}</span>
            </a>
          </th>
        </tr>
        <tr>
          <th nzWidth="100px" [nzChecked]="waitCheck.tableData.checked"
              [nzIndeterminate]="waitCheck.tableData.indeterminate" (nzCheckedChange)="onAllCheckedWaitCheck($event)"
              nzLeft></th>
          <th nzAlign="center">成交入库时间</th>
          <th nzAlign="center">机器编码</th>
          <th nzAlign="center">库位</th>
          <th nzAlign="center">渠道占用</th>
          <th nzAlign="center">来源</th>
          <th nzAlign="center">实际回收价</th>
          <th nzAlign="center">B端成色</th>
          <th nzAlign="center">C端成色</th>
          <th nzAlign="center">机型</th>
          <th nzAlign="center">内存</th>
          <th nzAlign="center" nzWidth="160px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of waitCheckTable.data">
          <td [nzChecked]="waitCheck.tableData.setOfCheckedId.has(data['id'])"
              (nzCheckedChange)="onItemChecked(data['id'], $event)" nzLeft></td>
          <td nzAlign="center">{{ data['clinchTime'] }}</td>
          <td nzAlign="center">{{ data['equipmentCode'] }}</td>
          <td nzAlign="center">{{ data['libraryName'] || '-' }}</td>
          <td nzAlign="center">{{ OCCUPYSTATUS[data['occupyStatus']] }}</td>
          <td nzAlign="center">{{ data['source'] === 1 ? '重新入库' : '回收' }}</td>
          <td nzAlign="center">{{ data['finalPrice'] }}</td>
          <td nzAlign="center">{{ data['colourNameB'] }}</td>
          <td nzAlign="center">{{ data['colourName'] }}</td>
          <td nzAlign="center">{{ data['modelName'] }}</td>
          <td nzAlign="center">{{ data['memory'] }}</td>
          <td nzAlign="center">
            <a (click)="showDeviceDetail(data)">查看</a>
            <a nzPopconfirmPlacement="top"
               nz-popconfirm
               nzPopconfirmTitle="确认验收?"
               nzOkText="确认"
               (nzOnConfirm)="checkDevice('current',data['id'])"
               nzCancelText="取消">验收</a>
          </td>
        </tr>
        </tbody>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </nz-table>
    </nz-tab>

    <!--已验收-->
    <nz-tab nzTitle="已验收">
      <!--过滤-->
      <div>
        <div class="searchItem">
          <label>编码：</label>
          <input nz-input placeholder="请输入编码" [(ngModel)]="checked.query.equipmentCode"/>
        </div>
        <div class="searchItem">
          <label>验收时间：</label>
          <nz-date-picker style="width: 140px;"
                          [nzDisabledDate]="disabledStartDateChecked"
                          nzFormat="yyyy-MM-dd"
                          [(ngModel)]="checked.query.startTime"
                          nzPlaceHolder="开始时间"
          ></nz-date-picker>
          <nz-date-picker style="width: 140px;"
                          [nzDisabledDate]="disabledEndDateChecked"
                          nzFormat="yyyy-MM-dd"
                          [(ngModel)]="checked.query.endTime"
                          nzPlaceHolder="结束时间"
          ></nz-date-picker>
        </div>
        <div class="searchItem">
          <label>来源：</label>
          <nz-select [(ngModel)]="checked.query.source" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
            <nz-option [nzValue]="0" nzLabel="回收"></nz-option>
            <nz-option [nzValue]="1" nzLabel="重新入库"></nz-option>
          </nz-select>
        </div>
        <div class="searchItem">
          <button nz-button nzType="primary" (click)="queryBtn('checked')">查询</button>
          <button nz-button nzType="default" (click)="resetCondition('checked')">重置</button>
        </div>
      </div>
      <!--表格-->
      <nz-table
        #checkedTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzData]="checked.tableData.records"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="checked.tableData.total"
        [(nzPageIndex)]="checked.query.page"
        [(nzPageSize)]="checked.query.pageSize"
        [nzFrontPagination]="false"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChangeChecked($event)"
        (nzPageSizeChange)="onPageSizeChangeChecked($event)"
      >
        <thead>
        <tr>
          <th nzAlign="center">成交入库时间</th>
          <th nzAlign="center">验收时间</th>
          <th nzAlign="center">机器编码</th>
          <th nzAlign="center">渠道占用</th>
          <th nzAlign="center">来源</th>
          <th nzAlign="center">实际回收价</th>
          <th nzAlign="center">B端成色</th>
          <th nzAlign="center">C端成色</th>
          <th nzAlign="center">机型</th>
          <th nzAlign="center">内存</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of checkedTable.data">
          <td nzAlign="center">{{ data['clinchTime'] }}</td>
          <td nzAlign="center">{{ data['acceptanceTime'] }}</td>
          <td nzAlign="center">{{ data['equipmentCode'] }}</td>
          <td nzAlign="center">{{ OCCUPYSTATUS[data['occupyStatus']] }}</td>
          <td nzAlign="center">{{ data['source'] === 1 ? '重新入库' : '回收' }}</td>
          <td nzAlign="center">{{ data['finalPrice'] }}</td>
          <td nzAlign="center">{{ data['colourNameB'] }}</td>
          <td nzAlign="center">{{ data['colourName'] }}</td>
          <td nzAlign="center">{{ data['modelName'] }}</td>
          <td nzAlign="center">{{ data['memory'] }}</td>
        </tr>
        </tbody>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </nz-table>

    </nz-tab>

    <!--统计-->
    <nz-tab nzTitle="统计">

      <!--过滤-->
      <div>
        <div class="searchItem">
          <label>成交入库时间：</label>
          <nz-date-picker style="width: 140px;"
                          [nzDisabledDate]="disabledStartDateStatistics"
                          nzFormat="yyyy-MM-dd"
                          [(ngModel)]="statistics.query.startTime"
                          nzPlaceHolder="开始时间"
          ></nz-date-picker>
          <nz-date-picker style="width: 140px;"
                          [nzDisabledDate]="disabledEndDateStatistics"
                          nzFormat="yyyy-MM-dd"
                          [(ngModel)]="statistics.query.endTime"
                          nzPlaceHolder="结束时间"
          ></nz-date-picker>
        </div>
        <div class="searchItem">
          <label>来源：</label>
          <nz-select [(ngModel)]="statistics.query.source" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
            <nz-option [nzValue]="0" nzLabel="回收"></nz-option>
            <nz-option [nzValue]="1" nzLabel="重新入库"></nz-option>
          </nz-select>
        </div>
        <div class="searchItem">
          <button nz-button nzType="primary" (click)="queryBtn('statistics')">查询</button>
          <button nz-button nzType="default" (click)="resetCondition('statistics')">重置</button>
        </div>
      </div>
      <nz-table #statisticsTable [nzData]="statistics.tableData.records"
                nzSize="small"
                nzShowSizeChanger
                nzShowPagination="false"
                [nzFrontPagination]="false"
      >
        <thead>
        <tr>
          <th nzAlign="center">成交入库日期</th>
          <th nzAlign="center">合计</th>
          <th nzAlign="center">待验收</th>
          <th nzAlign="center">已验收</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngIf="statistics.tableData.records.length">
          <td nzAlign="center">合计</td>
          <td nzAlign="center">{{ statistics.tableData['totalCount'] + statistics.tableData['totalAcceptCount'] }}</td>
          <td nzAlign="center">{{ statistics.tableData['totalCount'] }}</td>
          <td nzAlign="center">{{ statistics.tableData['totalAcceptCount'] }}</td>
        </tr>
        <tr *ngFor="let data of statisticsTable.data;let index=index;">
          <td nzAlign="center">{{ data['date'] }}</td>
          <td nzAlign="center">{{ data['accepting'] + data['accepted'] }}</td>
          <td nzAlign="center">{{ data['accepting'] }}</td>
          <td nzAlign="center">{{ data['accepted'] }}</td>
        </tr>
        <tr *ngIf="statistics.tableData.records.length">
          <td nzAlign="center">合计</td>
          <td nzAlign="center">{{ statistics.tableData['totalCount'] + statistics.tableData['totalAcceptCount'] }}</td>
          <td nzAlign="center">{{ statistics.tableData['totalCount'] }}</td>
          <td nzAlign="center">{{ statistics.tableData['totalAcceptCount'] }}</td>
        </tr>
        </tbody>
      </nz-table>
    </nz-tab>
  </nz-tabset>
</nz-card>

<!--机器详情-->
<nz-modal
  [(nzVisible)]="detailModal.visible"
  nzWidth="1588px"
  nzTitle="详情"
  [nzFooter]="null"
  (nzOnCancel)="hideDetailModal()">
  <div *nzModalContent>
    <div>
      <span class="detailLabel">型号：</span>
      <span>{{detailModal.typeName}} {{detailModal.modelName}} {{detailModal.store}} {{detailModal.net}} {{detailModal.colourName}} {{detailModal.colourNameB}}</span>
    </div>
    <div>
      <span class="detailLabel">机器编码：</span>
      <span>{{detailModal.phoneCode}}</span>
    </div>
    <div>
      <span class="detailLabel">实际回收价格：</span>
      <span>{{detailModal.finalPrice}}</span>
    </div>
    <div>
      <span class="detailLabel">验机师备注：</span>
      <span style="color: red">{{detailModal.checkNote}}</span>
    </div>
    <div style="margin-bottom: 8px">
      <button nzType="primary" nzPopconfirmPlacement="top"
              nz-popconfirm
              nzPopconfirmTitle="确认验收?"
              nzOkText="确认"
              (nzOnConfirm)="modalCheck()"
              nzCancelText="取消" nz-button>确认验收
      </button>
    </div>
    <div>
      <nz-image-group *ngIf="detailModal.img.length">
        <img
          style="margin: 0 8px 8px 0"
          nz-image
          width="300px"
          height="300px"
          *ngFor="let i of detailModal.img"
          [nzSrc]="i"
        />
      </nz-image-group>
    </div>
  </div>
</nz-modal>

<!-- S 修改库位 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isKwVisible"
  [nzTitle]="'修改库位'"
  (nzOnCancel)="isKwVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- 批量修改库位并二手占用 -->
      <p class="modal-kwp p-b-10" *ngIf="this.locationModalObj.isMerge">
        确认将机器放到二手商城销售？
      </p>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">库位</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择库位"
            [(ngModel)]="locationModalObj.libraryId">
            <nz-option
              *ngFor="let option of locationOptions"
              [nzLabel]="option.name"
              [nzValue]="option.id"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item >
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isKwVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitKwLoading" (click)="submitLocationData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 修改库位 -->
